<script setup>
import {
  CircleClose,
  Warning,
  Finished,
  ArrowDownBold,
} from "@element-plus/icons-vue";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { onMounted, ref } from "vue";
import axios from "axios";
import { useRoute } from "vue-router";
import { useStateStore } from "@/stores/counter.js";
import {dynamicAPI, staticAPI} from "@/apis/anay.js";

const stateStore = useStateStore();
const loading = ref(true);

const OnScroll = (id) => {
  document.getElementById(id).scrollIntoView({
    behavior: "smooth", //smooth:平滑，auto：直接定位
    block: "start",
    inline: "start",
  });
};
let tableDataDan = ref([]);
let tableDataWar = ref([]);
let tableDataSaf = ref([]);
const route = useRoute();
const tableDataAll = ref([]);
const counts = ref({ risk: 0, warning: 0, safe: 0 });
// 总数
const totalD = ref(0);
const totalW = ref(0);
const totalS = ref(0);
// 当前页
let currentD = ref(1);
// 每页总数
const limitD = ref(10);
// 当页数据
let pageTableD = ref([]);

let currentW = ref(1);
// 每页总数
const limitW = ref(10);
// 当页数据
let pageTableW = ref([]);

let currentS = ref(1);
// 每页总数
const limitS = ref(10);
// 当页数据
let pageTableS = ref([]);

const loadData =async (filepath) =>{
  const storedTableDataDan = sessionStorage.getItem('tableDataAll');
  const storedTotalD = sessionStorage.getItem('counts');
  if(storedTableDataDan && storedTotalD){
    tableDataAll.value = JSON.parse(storedTableDataDan);
    counts.value = JSON.parse(storedTotalD);
    loading.value = false;
  }else {
    await fetchData(filepath);
  }
}

const fetchData = async (filepath) =>{
  try{
    const response = await staticAPI(filepath);
    tableDataAll.value = response.data.permissions;
    counts.value = response.data.counts;
    sessionStorage.setItem('tableDataAll',JSON.stringify(tableDataAll.value));
    sessionStorage.setItem('counts',JSON.stringify(counts.value));
    loading.value = false;
  }catch (error){
    console.error('Failed to fetch data',error);
  }
}

onMounted(async () => {
  const filepath = route.query.filepath;
  // console.log(filepath);
  if (filepath) {
    await loadData(filepath)
    cateData();
    totalD.value = tableDataDan.value.length;
    totalW.value = tableDataWar.value.length;
    totalS.value = tableDataSaf.value.length;
    initDataD();
    initDataW();
    initDataS();
    stateStore.changePer();
    loading.value = false;
  }
});
const cateData = () => {
  // console.log(tableDataAll.value.length);
  for (let i = 0; i < tableDataAll.value.length; i++) {
    // console.log(tableDataAll.value[i]);
    if (tableDataAll.value[i].sign === "风险") {
      tableDataDan.value.push(tableDataAll.value[i]);
    } else if (tableDataAll.value[i].sign === "警告") {
      tableDataWar.value.push(tableDataAll.value[i]);
    } else if (tableDataAll.value[i].sign === "安全") {
      tableDataSaf.value.push(tableDataAll.value[i]);
    }
  }
  // console.log(tableDataDan.value);
};

const initDataD = () => {
  // console.log(tableDataDan.value);
  pageTableD.value = tableDataDan.value.filter(
    (item, index) =>
      index < currentD.value * limitD.value &&
      index >= limitD.value * (currentD.value - 1)
  );
};

//分页
const handleSizeChangeD = (e) => {
  limitD.value = e;
  initDataD();
};
const handleCurrentChangeD = (e) => {
  currentD.value = e;
  initDataD();
};

const initDataW = () => {
  // console.log(tableDataWar.value);
  pageTableW.value = tableDataWar.value.filter(
    (item, index) =>
      index < currentW.value * limitW.value &&
      index >= limitW.value * (currentW.value - 1)
  );
};

//分页
const handleSizeChangeW = (e) => {
  limitW.value = e;
  initDataW();
};
const handleCurrentChangeW = (e) => {
  currentW.value = e;
  initDataW();
};

const initDataS = () => {
  // console.log(tableDataSaf.value);
  pageTableS.value = tableDataSaf.value.filter(
    (item, index) =>
      index < currentS.value * limitS.value &&
      index >= limitS.value * (currentS.value - 1)
  );
};

//分页
const handleSizeChangeS = (e) => {
  limitS.value = e;
  initDataS();
};
const handleCurrentChangeS = (e) => {
  currentS.value = e;
  initDataS();
};
</script>
<template>
  <el-card
    shadow="always"
    style="margin-bottom: 10px"
    v-loading="loading"
    element-loading-text="分析中..."
  >
    <template #header
      ><SvgIcon iconName="icon-xiangxixinxi" style="margin-right: 5px"></SvgIcon
      >应用权限</template
    >
    <div class="action">
      <div class="mycard">
        <div class="container">
          <el-icon style="font-size: 25px"><CircleClose /></el-icon>
          <span style="font-size: 18px">风险</span>
          <span style="font-weight: bold; font-size: 20px">
            {{ counts.风险 }}</span
          >
        </div>
        <el-button
          class="view"
          plain
          :icon="ArrowDownBold"
          @click="OnScroll('tableDanger')"
          size="small"
          >查看</el-button
        >
      </div>
      <div class="mycard" style="background-color: #ffc107">
        <div class="container">
          <el-icon style="font-size: 25px"><Warning /></el-icon>
          <span style="font-size: 18px">警告</span>
          <span style="font-weight: bold; font-size: 20px">
            {{ counts.警告 }}</span
          >
        </div>
        <el-button
          class="view"
          plain
          :icon="ArrowDownBold"
          @click="OnScroll('tableWarning')"
          size="small"
          >查看</el-button
        >
      </div>
      <div class="mycard" style="background-color: #28a745">
        <div class="container">
          <el-icon style="font-size: 25px"><Finished /></el-icon>
          <span style="font-size: 18px">安全</span>
          <span style="font-weight: bold; font-size: 20px">
            {{ counts.安全 }}</span
          >
        </div>
        <el-button
          class="view"
          plain
          :icon="ArrowDownBold"
          @click="OnScroll('tableSafe')"
          size="small"
          >查看</el-button
        >
      </div>
    </div>
    <!-- 危险表格 -->
    <el-table
      :data="pageTableD"
      border
      stripe
      style="width: 100%; margin-top: 20px"
      id="tableDanger"
    >
      <el-table-column prop="date" label="申请权限" />
      <el-table-column label="标志" width="300px">
        <template #default="scope">
          <el-tag type="danger">{{ scope.row.sign }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="中文名称" />
    </el-table>
    <el-config-provider :locale="zhCn">
      <el-pagination
        v-model:current-page="currentD"
        :page-size="limitD"
        background
        layout="total,jumper,prev, pager, next"
        :total="totalD"
        :pager-count="6"
        @size-change="handleSizeChangeD"
        @current-change="handleCurrentChangeD"
      />
    </el-config-provider>
    <!-- 警告表格 -->
    <el-table
      :data="pageTableW"
      border
      stripe
      style="width: 100%; margin-top: 20px"
      id="tableWarning"
    >
      <el-table-column prop="date" label="申请权限" />
      <el-table-column label="标志" width="300px">
        <template #default="scope">
          <el-tag type="warning">{{ scope.row.sign }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="中文名称" />
    </el-table>
    <el-config-provider :locale="zhCn">
      <el-pagination
        v-model:current-page="currentW"
        :page-size="limitW"
        background
        layout="total,jumper,prev, pager, next"
        :total="totalW"
        :pager-count="6"
        @size-change="handleSizeChangeW"
        @current-change="handleCurrentChangeW"
      />
    </el-config-provider>
    <!-- 安全表格 -->
    <el-table
      :data="pageTableS"
      border
      stripe
      style="width: 100%; margin-top: 20px"
      id="tableSafe"
    >
      <el-table-column prop="date" label="申请权限" />
      <el-table-column label="标志" width="300px">
        <template #default="scope">
          <el-tag type="success">{{ scope.row.sign }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="中文名称" />
    </el-table>
    <el-config-provider :locale="zhCn">
      <el-pagination
        v-model:current-page="currentS"
        :page-size="limitS"
        background
        layout="total,jumper,prev, pager, next"
        :total="totalS"
        :pager-count="6"
        @size-change="handleSizeChangeS"
        @current-change="handleCurrentChangeS"
      />
    </el-config-provider>
  </el-card>
</template>

<style scoped>

::v-deep .el-scrollbar__view{
  height: 100%;
}
.el-card.is-always-shadow{
  height: 100%;
  overflow: auto;
}
.el-table {
  --el-table-text-color: #3f444d;
  --el-table-header-text-color: #13161a;
  font-weight: normal;
  font-size: 15px;
  height: 24%;
}
.view {
  position: relative;
  font-weight: bold;
}
.container {
  /* float: left; */
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  justify-content: center;
  /* margin-left: 30px; */
  /* width: 50px; */
}
.el-pagination {
  margin-top: 20px;
  justify-content: center;
}
.mycard {
  display: flex;
  width: 250px;
  background-color: #dc3545;
  font-weight: bold;
  height: 60px;
  align-items: center;
  border-radius: 5px;
  justify-content: space-between;
  padding: 0px 15px;
}
/* .el-icon {
  position: relative;
  top: 48px;
  color: rgb(67, 64, 64);
  font-size: 52px;
} */
.el-card__body span {
  font-size: 16px;
  font-weight: normal;
}
/* 我上午不是给你说 这个card 因为用所以card组件都带这个样式 所以受影响了 */
::v-deep .el-card__body {
  padding: 10px;
  font-weight: bold;
  font-size: 30px;
  height: 100%;
  overflow: auto;
}
.action {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
::v-deep .el-card__header {
  font-weight: bold;
  font-size: 20px;
}
</style>